<template>
  <view>
    <view class="head_common_bg head_cls" :style="{'background':bgColor!=null?bgColor:''}">
      <view class="f_row_center" style="height: 88rpx;margin-top: 88rpx">
        <view style="position: absolute;text-align: center;width: 100vw;z-index: -1" :style="{'color':titleColor!=null?titleColor:''}">{{ title }}</view>
        <view v-if="isShowBack" @click="back_click" class="f_row_center" style="height: 88rpx;padding: 0rpx 70rpx 0rpx 30rpx">
          <image :src="isWhiteBack?'/static/back_white.png':'/static/back_black.png'" style="height: 38rpx;width: 22rpx;"/>
        </view>
        <view class="flex_1"></view>
        <view v-if="otherImg!=null" @click="otherClick" class="f_row_center" style="padding:0 30rpx;height: 88rpx">
          <image :src="otherImg" style="height: 38rpx;width: 38rpx;"/>
        </view>
      </view>
    </view>
    <view style="height: 176rpx"/>
  </view>

</template>

<script lang="ts">
import {Vue, Component, Prop, Watch, Mixins} from "vue-property-decorator";
import XRouterConfig from "@/api/XRouterConfig";

@Component(
    {
      components: {}
    }
)
export default class HeadBarView extends Vue {
  @Prop() title?: string;
  @Prop({default: true}) isShowBack?: boolean;
  @Prop() bgColor?: string;
  @Prop() titleColor?: string;
  @Prop() otherImg?: string;
  @Prop({default: false}) isWhiteBack?: boolean;


  back_click() {
    XRouterConfig.back(0)
    this.$emit("back");
  }
  otherClick(){
    this.$emit("otherClick");
  }

  statusHeight: number = 0;
}
</script>

<style scoped>
.head_cls {
  position: fixed;
  width: 100vw;
  z-index: 99;

}
</style>